<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.vcharts{
				position: relative;
				width: 300px;
				height: 200px;
				border: 1px solid #000000;
			}
			.vcharts:after{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 30px;
				content: '';
				height: 1px;
				background: #000000;
				width: 100%;
				
			}
			.vcharts-item{
				
				height: 100%;
				float: left;
				width: 28px;
				margin-right: 22px;
			}
			.vcharts-item-data{
				position: relative;
				height: 170px;
			}
			.vcharts-item-target,.vcharts-item-reality{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				width: 9px;
				height: 0px;
				background: #ebebeb;
				border-radius: 30px;
				overflow: hidden;
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}
			.vcharts-item-reality{
				z-index: 2;
				height: 0px;
				background: #66D8EA;
				
			}
			.vcharts-item-text{
				position: absolute;
				bottom: 0px;
				left: 50%;
				transform: translateX(-50%);
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				width: 100%;
				color: #aaa;
				text-align: center;
				-webkit-transition: all .7s ease;
				transition: all .7s ease;
				
			}
			.vcharts-item-title{
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 11px;
				color: #4A4A4A;
			}
		</style>
	</head>
	<body>
		<div id='app'>
			{{maxData}}
			<div class="vcharts">
				<div class="vcharts-item" v-for="(item,index) in list" :key="item.title">
					<div class="vcharts-item-data">
						<div class="vcharts-item-target" :style="{height:item.target/maxData*150+'px'}"></div>
						<div class="vcharts-item-reality" :style="{height:item.reality/maxData*150+'px'}"></div>
						<div class="vcharts-item-text" :style="{bottom:(item.target>item.reality?item.target:item.reality)/maxData*150+'px'}">{{item.target}}</div>
					</div>
					<div class="vcharts-item-title">{{item.title}}</div>
				</div>
			</div>
		</div>
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var nlist = [
				{
					title:"清晨",
					reality:400,
					target:504,
					startTime:'08:00:00',
					endTime:'10:00:00'
				},{
					title:"上午",
					reality:0,
					target:672,
					startTime:'08:00:00',
					endTime:'10:00:00'
				},
				{
					title:"中午",
					reality:120,
					target:673,
					startTime:'08:00:00',
					endTime:'10:00:00'
				},
				{
					title:"下午",
					reality:0,
					target:840,
					startTime:'08:00:00',
					endTime:'10:00:00'
				},
				{
					title:"傍晚",
					reality:540,
					target:504,
					startTime:'08:00:00',
					endTime:'10:00:00'
				},
				{
					title:"晚上",
					reality:0,
					target:168,
					startTime:'08:00:00',
					endTime:'10:00:00'
				}
			]
		</script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:function(){
					return{
						list:nlist,
						maxData:0
					}
				},
				mounted:function(){
					var _this = this
					setTimeout(function(){
						
						_this.initCharts()
					},1000)
					
				},
				
				methods:{
					initCharts:function(){
						this.maxData=this.getMaxData();
					},
					
					getMaxData:function(){
						var arr=[]
						this.list.forEach(item=>{
							if(item.target>=item.reality){
								arr.push(item.target)
							}else{
								arr.push(item.reality)
							}
						})
						var max = Math.max.apply(Math, arr)
						return max
					}
				}
			})
		</script>
	</body>
</html>
